<template>
  <div style="padding-bottom:10px">
    <div class="search">
      <a href="javascript:;" class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </a>
      <el-select style="width:100px" v-model="query.courseType">
        <el-option value>全部</el-option>
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input style="width:420px" v-model="query.courseName"></el-input>
      <el-button type="primary" @click.native="search">搜索</el-button>
    </div>
    <p class="searchResult">共找到{{ total }}个结果</p>
    <div class="dataList">
      <div class="top">
        排序:
        <span style="color:rgb(0, 124, 220)">默认</span>
        <span class="dateSort" @click="changeSort">
          发布时间排序
          <i
            class="iconfont icon-up"
            style="font-weight:700;font-size:20px"
            :class="{ on: query.orderByField == 'gmt_create asc' }"
          ></i>
          <i
            class="iconfont icon-up1"
            style="font-weight:700;font-size:20px"
            :class="{ on: query.orderByField == 'gmt_create desc' }"
          ></i>
        </span>
      </div>
      <ul class="content">
        <li v-for="item in dataList" @click="goDetail(item)">
          <dl class="clear">
            <dt>
              <mImg
                :url="item.coverPath"
                :defaultUrl="'/static/img/default.png'"
              ></mImg>
            </dt>
            <dd>
              <p class="title">
                {{ item.courseName }}
                <span>{{ type[item.courseType] }}</span>
              </p>
              <p class="description">{{ item.introduction }}</p>
            </dd>
          </dl>
        </li>
      </ul>
      <div style="text-align:center;margin-top:10px;padding-bottom:10px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :pageSize="15"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { allCategory } from "@/api/system";
import { queryCourseByTypeAndName } from "@/api/course";
export default {
  name: "TrainSearch",
  data() {
    return {
      query: {
        courseName: "",
        courseType: "",
        orderByField: "gmt_create asc",
        pageIndex: 1,
        pageSize: 15
      },
      typeList: [],
      type: {},
      searchText: "",
      dataList: [],
      total: 0
    };
  },
  methods: {
    goBack() {
      this.$router.push({
        path: "/train/index"
      });
    },
    goDetail(item) {
      this.$router.push({
        path: "/train/detail/" + item.id
      });
    },
    changeSort() {
      this.query.orderByField =
        this.query.orderByField == "gmt_create asc"
          ? "gmt_create desc"
          : "gmt_create asc";
      this.currentChange(1);
    },
    currentChange(currentPage) {
      this.query.pageIndex = currentPage;
      this.getData();
    },
    search() {
      this.query.pageIndex = 1;
      this.getData();
    },
    getData() {
      queryCourseByTypeAndName(this.query).then(res => {
        if (res.code == 1) {
          this.dataList = res.response.list;
          this.total = res.response.total;
        }
      });
    }
  },
  created() {
    allCategory({ categoryId: 0 }).then(res => {
      if (res.code == 1) {
        res.response.map(item => {
          this.typeList.push({
            label: item.concreteName,
            value: item.id
          });
          this.type[item.id] = item.concreteName;
        });
      }
    });
    this.query.courseName = this.$route.query.condition;
    this.query.courseType = this.$route.query.courseType * 1 || null;
    this.searchText = this.$route.query.condition;
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.search {
  text-align: center;
  padding: 10px 0;
  font-size: 0px;
  position: relative;
  .back {
    position: absolute;
    left: 0;
    height: 40px;
    line-height: 40px;
    width: 100px;
    font-size: 16px;
    font-weight: 400;
  }
}
.searchResult {
  line-height: 30px;
  font-size: 16px;
  font-weight: 400;
  color: rgb(108, 114, 119);
  span {
    color: rgb(0, 124, 220);
  }
}
.dataList {
  background-color: #fff;
  .top {
    font-size: 16px;
    font-weight: 400;
    height: 35px;
    line-height: 35px;
    background-color: rgb(222, 230, 236);
    padding-left: 20px;
    .dateSort {
      display: inline-block;
      margin-left: 20px;
      cursor: pointer;
      user-select: none;
    }
  }
  .content {
    background-color: #fff;
    padding: 0 10px 20px 10px;
    li {
      cursor: pointer;
      padding: 12px;
      border-bottom: 1px dashed #999;
      dl {
        dt {
          float: left;
          width: 180px;
          height: 125px;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        dd {
          padding-left: 200px;
          .title {
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            font-weight: 400;
            span {
              font-size: 12px;
              color: rgba(0, 124, 220, 1);
            }
          }
          .description {
            font-size: 14px;
            font-weight: 400;
            color: rgb(108, 114, 119);
            word-break: break-all;
            text-indent: 30px;
          }
        }
      }
    }
  }
}
.iconfont.on {
  color: rgb(0, 124, 220);
}
</style>
